<template>
  <div>
    服务名称
    <span ></span>
    <el-input v-model="newServer.name"></el-input>
    服务内容
    <el-input v-model="newServer.content"></el-input>
    服务价格
    <el-input v-model="newServer.price"></el-input>
<!-- 上传图片 -->
<el-form>
 <el-form-item label="上传图片">
        <el-upload class="avatar-uploader"
                   action="http://192.168.11.18:8080/file/uploadImage"
                   :show-file-list="false"
                   :on-success="getUploadFileName">
          <img v-if="imageUrl"
               :src="imageUrl"
               class="avatar">
          <i v-else
             class="el-icon-upload avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
</el-form>
  
  <div id="action">
    <el-button type="danger" size="mini" @click="commit">确定</el-button>
      <el-button type="success" size="mini" @click="cancel">取消</el-button>   
    </div>
  
  </div>
</template>
<script>
export default{
  data(){
    return{
      newServer:{},
      imageUrl: '',
    }
  },
  methods:{
    // 上传图片
  getUploadFileName (res) {
      this.imageUrl = res;
      this.server.image = res;
      console.log(res)
    },
    cancel(){
 this.$emit("closedialog",{result:true,data:{}})
    },
    commit(){
      this.$emit("closedialog",{result:true,data:this.newServer})
    }  
  },
  mounted(){
     
 //js深拷贝
  //stringify  转换成json格式的字符串
  //parse   将字符串转换成JSON数据  对象
    this.newServer=JSON.parse(JSON.stringify(this.server));
  },
  props:{
    server:{},//用来接收父组件传过来的数据
  }
}
</script>
<style scoped>
  h3{
    color: red;
  }
  *{
    /* font-family: "微软雅黑"; */
    font-family: "PingFang SC";
   
  }
</style>